<template>
  <div>
    <el-form-item :style="{'width':formItem.width + 'px'}" v-if="formItem.type === 'fileUpload'">
      <template #label>
        <formDesignLabel :formItem="formItem" :isManual="true" />
      </template>
      <formDesignDescription :formItem="formItem" />
      <div class="upload-box">
        <el-button type="primary" size="large" disabled>
          <el-icon ><Upload /></el-icon>上传文件
        </el-button>
        <div class="limit">最多上传{{ formItem.limit }}个文件，单个文件{{ formItem.fileSize }}MB以内</div>
      </div>
      <div v-if="formDesign.publishSetting.typeId == 4 || curBankType == 1" class="exam-setting">
        <qsAnswer :formItem="formItem" :isAnswerSet="false" />
      </div>
    </el-form-item>
  </div>
</template>

<script setup>
import { defineProps, computed } from 'vue'
import formDesignLabel from "@/views/form/manage/design/components/formDesignLabel.vue";
import formDesignDescription from "@/views/form/manage/design/components/formDesignDescription.vue";
import qsAnswer from "@/views/form/manage/design/components/qsAnswer.vue";
import { Upload } from '@element-plus/icons-vue'
import { useStore } from 'vuex'

//题库分组
const curBankType = computed(()=>{return store.state.formDesignInfo.curBankType})
const store = useStore()
const props = defineProps({
  formItem: {
    type: Object,
  },
})
const formItem = computed(()=>{return props.formItem})
const formDesign = computed(()=>{return store.getters.formDesignInfo})
</script>

<style lang="scss" scoped>
.el-icon{
  font-size: 20px;
  margin-right: 2px;
  margin-bottom: 4px;
}
.upload-box{
  padding: 8px 11px;
  .limit{
    margin-top: 5px;
    width: 100%;
    color: #797979;
  }
}
.exam-setting{
  margin-top: 5px;
  width: 100%;
}
</style>